<template>
    <div class="">
        <ProdItem itemClass="prod-item-box-50" :titleName="props.titleName">
            <template #WeeksReport>
                <TeCarts _h="28rem" echartsName="echartsWeeksReport" :optionsData="optionsData" />
            </template>
        </ProdItem>
    </div>
</template>
<script setup>
import { ref } from "vue"
import ProdItem from "@/components/prodItem/index.vue"
import TeCarts from "@/components/TEcharts/index.vue"
import * as echarts from "echarts";
const props = defineProps({
  titleName:{
    type:String,
    default:""
  }
})
let echartsBox = echarts
const shijiekeList = ref([
    {
        id: 1,
        title: "开始位置",
        value: "58H",
        color: ""
    },
    {
        id: 2,
        title: "真空度",
        value: "58H",
        color: ""
    }
])
const optionsData = ref(
    {
        color: [new echartsBox.graphic.LinearGradient(
            0, 0, 0, 1, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
            [
                { offset: 0, color: 'rgba(105, 193, 255, 1)' },
                { offset: 1, color: 'rgba(105, 193, 255, 0.1)' }
            ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
        )],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                name: '(次数)',
                axisTick: {
                    alignWithLabel: true
                },
                nameTextStyle: {
                    color: "rgba(255, 255, 255, 1)"
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: ['rgba(255,255,255,.1)']
                    }
                }
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '40%',
                data: [1, 3, 2, 3, 4, 2, 1, 3, 3, 2, 3, 2]
            },

        ],
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: '{c}'
            }
        },
    }
)

</script>
<style lang="scss" scoped></style>
  